<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视图展示</title>
    <script src="../showstatic/js/echarts.js"></script>
    <script src="../showstatic/js/jquery-1.7.2.min.js"></script>
</head>
<body>
<select id="sel">
    <option value="main1">条形图</option>
    <option value="main3">折线图</option>
    <option value="main2">饼状图</option>
</select>
<input id="start" type="date">-<input id="end" type="date"><button onclick="sub()">提交</button>
<br>
<button onclick="planMovie()">排片量</button>
<button onclick="upperSeat()">上座率</button>
<div id="main1"  style="display: block;width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div>
<!--<div id="main2"  style="display: none;width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div>-->
<!--<div id="main3"  style="display: block;width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div>-->
    <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main1'));//main是<div id="main1" style="width: 600px;height:400px;"></div>的id
    // var myChart2 = echarts.init(document.getElementById('main2'));//main是<div id="main1" style="width: 600px;height:400px;"></div>的id
    // var myChart3 = echarts.init(document.getElementById('main3'));//main是<div id="main1" style="width: 600px;height:400px;"></div>的id


    // $(document).ready(function(){
    //     $("#sel").change(function(){
    //         var option = $("#sel").val();
    //         $("#main1").prop("style","display:none");
    //         $("#main2").prop("style","display:none");
    //         $("#main3").prop("style","display:none");
    //         $("#"+option).prop("style","display:block");
    //
    //     })
    // })

    $(document).ready(function(){

    })

    function sub(){
        show($("#start").val(),$("#end").val());
    }
    
    function show(startDay,endDay) {
        $.ajax({
            url: 'turnover',
            type: 'post',
            data: {
                'startDay': startDay,
                'endDay': endDay
            },
            success: function(data){
                var keys = new Array();
                var vals = new Array();
                for(var key in data){
                    if(data[key]!=null) {
                        keys.push(key);
                        vals.push(data[key])
                    }
                }
                // 指定图表的配置项和数据
                var option1 = {
                    title: {
                        text: '影院营业额'
                    },
                    tooltip: {},
                    legend: {
                        data:['营业额']
                    },
                    xAxis: {
                        data: keys
                    },
                    yAxis: {},
                    series: [{
                        name: '营业额',
                        type: 'bar',
                        data: vals
                    }]
                };
                myChart1.setOption(option1);
            }
        })
    }

    
    function planMovie() {
        $.ajax({
            url: 'planMoviePlus',
            type: 'post',
            success: function(data){
                var arr = new Array();
                for(var i=0;i<data.length;i++){
                    arr.push(data[i].name);
                }
                // 指定图表的配置项和数据
                var option2 = {
                    title : {
                        text: '影院排片量统计',
                        subtext: '排片量统计',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: arr
                    },
                    series : [
                        {
                            name: '访问次数',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:data,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart1.setOption(option2);
            }
        })
    }

    function upperSeat() {
        $.ajax({
            url: 'upperSeat',
            type: 'post',
            success: function(data){
                var keys = new Array();
                var vals = new Array();
                for(var key in data){
                    if(data[key]!=null) {
                        keys.push(key);
                        vals.push(data[key])
                    }
                }
                // 指定图表的配置项和数据
                var option3 = {
                    title: {
                        text: '电影上坐率'
                    },
                    tooltip: {},
                    legend: {
                        data:['上座率']
                    },
                    xAxis: {
                        data: keys
                    },
                    yAxis: {},
                    series: [{
                        name: '上座率',
                        type: 'bar',
                        data: vals
                    }]
                };
                myChart1.setOption(option3);
            }
        })
    }

    // 指定图表的配置项和数据
    var option2 = {
        title : {
            text: 'Spark Streaming实战课程访问量实时统计',
            subtext: '实战课程访问次数',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['Spark SQL实战','Hadoop基础','Storm实战','Spark Streaming实战','理论']
        },
        series : [
            {
                name: '访问次数',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:3350, name:'Spark SQL实战'},
                    {value:3100, name:'Hadoop基础'},
                    {value:2340, name:'Storm实战'},
                    {value:1350, name:'Spark Streaming实战'},
                    {value:15480, name:'理论'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 指定图表的配置项和数据
    var option3 = {
        title: {text: 'Line Chart'},
        tooltip: {},
        toolbox: {
            feature: {
                dataView: {},
                saveAsImage: {
                    pixelRatio: 2
                },
                restore: {}
            }
        },
        xAxis: {},
        yAxis: {},
        series: [{
            type: 'line',
            smooth: true,
            data: [
                [12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]
            ]
        }]
    };



        // myChart1.setOption(option1);
        // myChart2.setOption(option2);


</script>
</body>
</html>